<template>
  <div class="help-post" :style="'min-height:' + screeHeight + 'px;'">
    <top-bar title="填写反馈"></top-bar>
    <div class="form-wrapper">
      <div class="type-wrapper" @click="show = true">
        <p :class="{ already: type }">
          {{ type.title ? type.title : "请选择问题类型" }}
        </p>
        <img src="@/assets/icon_06.png" alt="" class="icon" />
      </div>
      <div class="desc-wrapper">
        <textarea class="desc" placeholder="请输入问题内容" v-model="desc"></textarea>
      </div>
    </div>
    <div class="btn-wrapper">
      <van-button color="#224448" block @click="submit">发布</van-button>
    </div>
    <div class="btn-wrapper">
      <van-button color="#224448" block @click="goHelp">查看已发布的反馈</van-button>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker title="填写反馈" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import TopBar from "@/components/topBar.vue";
export default {
  name: "helpPost",
  data() {
    return {
      desc: "",
      type: {},
      show: false,
      typeList: [],
      columns: [],
      screeHeight: window.innerHeight - 220,
    };
  },
  mounted() {
    this.getHelpCates();
  },
  methods: {
    getHelpCates() {
      this.$api.cates().then((res) => {
        if (res.status_code == 200) {
          this.typeList = res.data;
          this.columns = res.data.map((item) => item.title);
        }
      });
    },
    submit() {
      if (!this.type.title) {
        Dialog({ message: "请先选择问题类型" });
        return;
      }
      if (!this.desc) {
        Dialog({ message: "请先输入问题内容" });
        return;
      }
      Toast.loading({
        message: "发布中...",
        forbidClick: true,
        duration: 0,
      });
      this.$api
        .store({
          title: this.desc,
          cate_id: this.type.id,
        })
        .then((res) => {
          this.desc = "";
          this.type = {};
          Toast.clear();
          if (res.status_code == 200) {
            Dialog({ message: "发布成功" });
          } else {
            Dialog({ message: res.message });
          }
        });
    },
    goHelp() {
      this.$router.push({
        path: "/help",
      });
    },
    onConfirm(value, index) {
      this.type = this.typeList[index];
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
  },
  components: {
    TopBar,
  },
};
</script>

<style lang="scss">
.help-post {
  .van-button {
    height: 54px;
  }
  .van-button--normal {
    font-size: 16px;
  }
}
</style>
<style lang="scss" scoped>
@supports (bottom: env(safe-area-inset-bottom)) {
  .help-post {
    height: calc(100vh - 50px - constant(safe-area-inset-bottom)) !important;
    height: calc(100vh - 50px - env(safe-area-inset-bottom)) !important;
  }
}
.help-post {
  height: calc(100vh - 50px);
  background-color: #fff;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  .form-wrapper {
    padding: 18px 15px 0;
    .type-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      height: 40px;
      background: #f4f4f4;
      border-radius: 10px;
      margin-bottom: 20px;
      p {
        font-size: 14px;
        color: #919191;
        &.already {
          color: #333;
        }
      }

      .icon {
        width: 13px;
        height: 11px;
      }
    }

    .desc-wrapper {
      height: 298px;
      background: #f4f4f4;
      border-radius: 10px;
      padding: 14px 16px;
      .desc {
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: none;
        line-height: 20px;
      }
    }
  }
  .btn-wrapper {
    margin: 45px 15px;
  }
}

@media screen and (min-width: 750px) {
  .help-post {
    .form-wrapper {
      .type-wrapper {
        p {
          font-size: 20px;
        }
      }

      .desc-wrapper {
        .desc {
          font-size: 20px;
        }
      }
    }
  }

  .van-popup--bottom {
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
